<script setup lang="ts">
import request from "@/utils/request";
import { useTransition, TransitionPresets } from "@vueuse/core";
import { storeToRefs } from "pinia";
import { useUserStoreHook } from "@/store/modules/user";
import router from "@/router";
import WorkbenchPageDesign from "../system/sysworkbenchinfo/workbenchPageDesign/index.vue";
import { authAllPerm } from "@/utils/index";
import dayjs from "dayjs";

const userStore = useUserStoreHook();
const { unRead, user } = storeToRefs(userStore);
defineOptions({
  // eslint-disable-next-line
  name: "Dashboard",
  inheritAttrs: false,
});

const DASHBOARD_ID = import.meta.env.VITE_APP_DASHBOARD_ID;
const workbenchPageId = ref("");
const keyOnly = ref("");
// 获取消息看板
const menuId = ref<string>("");
const isCreateMenu = ref<boolean>(false);
async function getMenuId() {
  const { data } = await request({
    url: `/system/sysworkbenchinfo/getPersonal/${DASHBOARD_ID}`,
    method: "get",
    data: {},
  }).finally(() => {});
  workbenchPageId.value = data.id || DASHBOARD_ID;
  keyOnly.value = dayjs().valueOf();
  if (data.createdUserId !== userStore.user.userId) {
    // 新建
    isCreateMenu.value = true;
  } else {
    // 直接设置
    isCreateMenu.value = false;
  }
}

async function createdMenu() {
  const { data } = await request({
    url: `/system/sysworkbenchinfo/createPersonal/${DASHBOARD_ID}`,
    method: "get",
    data: {},
  }).finally(() => {});
  console.log("createdMenu", data);
  if (data.id) {
    router.push({
      path: "/system/sysworkbenchinfo/workbenchPageDesign",
      query: {
        workbenchId: data.id,
        from: "dashboard",
      },
    });
  }

  // messageList.value = data;
}

//消息数(demo)
const messageCount = ref(0);
const messageCountOutput = useTransition(messageCount, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
});
messageCount.value = 2000;

//未读消息
const unreadCount = useTransition(unRead, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
});

const query = {
  current: 1,
  size: 5,
  data: {},
};

interface ListType {
  title?: string;
  id: string;
}
// 获取公告看板
const noticeList = ref<ListType[]>([]);
const noticeRequestEnd = ref(false);
async function getNoticeList() {
  const { data } = await request({
    url: `/system/sysnotice/queryByPage`,
    method: "post",
    data: query,
  }).finally(() => {
    noticeRequestEnd.value = true;
  });
  noticeList.value = data;
}

// 获取消息看板
const messageList = ref<ListType[]>([]);
const messageRequestEnd = ref(false);
async function getMessageList() {
  const { data } = await request({
    url: `/system/sysmessage/queryByPage`,
    method: "post",
    data: query,
  }).finally(() => {
    messageRequestEnd.value = true;
  });
  messageList.value = data;
}
// 携参跳转对应页面
function turnToMessage(type: number, id?: string) {
  const url =
    type === 1
      ? "/workbench/sysmessage"
      : type === 2
      ? "/workbench/mySysnotice"
      : "";
  if (id) userStore.setLinkId(id);
  router.push({
    path: url,
  });
}
// 携参跳转对应页面
function turnToDesigne() {
  if (isCreateMenu.value) {
    createdMenu();
  } else {
    router.push({
      path: "/system/sysworkbenchinfo/workbenchPageDesign",
      query: {
        workbenchId: workbenchPageId.value,
        from: "dashboard",
      },
    });
  }
}
onMounted(() => {
  // getMessageList();
  // getNoticeList();
  // 获取首页菜单id
});

onActivated(() => {
  // 获取首页菜单id
  DASHBOARD_ID && getMenuId();
});
</script>

<template>
  <div class="dashboard-container">
    <workbench-page-design
      v-if="workbenchPageId"
      :isDesign="2"
      :isProd="1"
      :id="workbenchPageId"
      :key="keyOnly"
    />
    <set-grid-item-button
      v-if="authAllPerm(['system:dashboard:setting']) && DASHBOARD_ID"
      @click-button="turnToDesigne"
    />
    <!-- 数据卡片 -->
    <!-- <el-row :gutter="20" class="mb-[20px] h-[536px]">
      <el-col :span="18" class="h-full">
        <Calendar />
      </el-col>
      <el-col :span="6" class="h-full">
        <el-row :gutter="20" class="mb-[20px] h-[256px]">
          <el-col :span="24" class="h-full">
            <el-card class="box-card h-full p-0">
              <template #header>
                <div @click="turnToMessage(1)" class="oneLine">
                  公告看板
                  <svg-icon icon-class="more" size="12" />
                </div>
              </template>

              <div
                v-for="item in noticeList"
                :key="item.id"
                class="cardList oneLine"
                @click="turnToMessage(2, item.id)"
              >
                <span>{{ item.title }}</span>
              </div>
              <div class="noData" v-if="!noticeList.length && noticeRequestEnd">
                <img
                  src="../../assets/images/noData.png"
                  width="150"
                  alt="暂无数据"
                />
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mb-[20px] h-[256px]">
          <el-col :span="24" class="h-full">
            <el-card class="box-card h-full p-0 blueCard">
              <template #header>
                <div @click="turnToMessage(1)" class="oneLine">
                  消息看板
                  <svg-icon icon-class="more" size="12" />
                </div>
              </template>

              <div
                v-for="item in messageList"
                :key="item.id"
                class="cardList oneLine"
                @click="turnToMessage(1, item.id)"
              >
                <span>{{ item.title }}</span>
              </div>
              <div
                class="noData"
                v-if="!messageList.length && messageRequestEnd"
              >
                <img
                  src="../../assets/images/noData.png"
                  width="150"
                  alt="暂无数据"
                />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row> -->
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  // padding: 12px;
  // background: #fff;
  // margin: 10px;

  .user-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  // .el-card {
  //   background-color: var(--el-bg-color);
  //   border-radius: 6px;
  //   box-shadow: none;
  //   border: none;
  //   box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
  //   .el-card__body {
  //     height: 100%;
  //     padding: 20px 0 0 0;
  //     .noData {
  //       display: flex;
  //       justify-content: center;
  //       margin-top: 35px;
  //       color: rgb(232, 250, 234);
  //     }
  //     .cardList {
  //       font-size: 14px;
  //       padding: 5px 15px;
  //       margin: 5px 10px;
  //       border-bottom: 1px dashed rgba(212, 219, 249, 0.5);
  //       cursor: pointer;
  //       span:nth-child(1) {
  //         font-size: 14px;
  //         color: #999;
  //       }
  //     }
  //     .cardList:nth-last-child(1) {
  //       border-bottom: none !important;
  //     }
  //     .cardList:hover {
  //       box-shadow: 0 3px 5px rgba(39, 83, 255, 0.1);
  //     }
  //   }
  // }

  .svg-icon {
    fill: currentcolor !important;
  }

  .box-card {
    :deep(.el-card__header) {
      border-bottom: none;
      color: rgba(107, 104, 254, 0.7);
      font-size: 15px;
      padding: 12px 20px;
      margin: 5px;
      border-radius: 6px;
      font-weight: 600;
      background: rgba(212, 219, 249, 0.3);
      cursor: pointer;
      svg {
        float: right;
        margin-right: 10px;
        margin-top: 5px;
      }
      &:hover {
        // box-shadow: 0 3px 12px rgba(39, 83, 255, 0.2);
        svg {
          transform: translateX(10px);
          animation-timing-function: ease-out;
        }
      }
    }
    :deep(.el-card__body) {
      padding: 3px 0 0 0;
      color: #909399;
    }
  }
  .orangeCard {
    :deep(.el-card__header) {
      color: rgba(254, 150, 92, 1);
      background: #fdf3e9;
    }
    :deep(.el-card__body) {
      .cardList {
        border-bottom: 1px solid #fdf3e9;
      }
      .cardList:hover {
        box-shadow: 0 3px 5px rgba(254, 150, 92, 0.15);
      }
    }
  }
  .greenCard {
    :deep(.el-card__header) {
      color: rgba(71, 199, 169, 1);
      background: rgb(232, 250, 234);
    }
    :deep(.el-card__body) {
      .cardList {
        border-bottom: 1px solid rgb(232, 250, 234);
      }
      .cardList:hover {
        box-shadow: 0 3px 5px rgba(71, 199, 169, 0.2);
      }
    }
  }
  .blueCard {
    :deep(.el-card__header) {
      color: #409eff;
      background: #f0f5fb;
    }
    :deep(.el-card__body) {
      .cardList {
        border-bottom: 1px dashed rgba(64, 158, 255, 0.15);
      }
      .cardList:hover {
        box-shadow: 0 3px 5px rgba(64, 158, 255, 0.2);
      }
    }
  }
}
</style>
